<template>
    <div style="display: flex;justify-content: center;align-items: center;width: 100%;">
        <div class="loginMain">
            <el-form ref="form" :model="input" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="input.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="input.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <el-input v-model="input.verificationCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-image style="width: 140px; height: 50px" :src="url" @click="loadData"></el-image>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { Login, getRsa } from "@/api/login";
import md5 from 'md5';
import Rsa from "@/utils/rsa"

export default {
    data() {
        return {
            input: {
                account: 'zhr',
                password: '123',
                verificationCode: ''
            },
            url: '',
            token: {
                access_token: '',
                refresh_token: ''
            },
            redictUrl:''
        }
    },
    created() {
        this.token.access_token = localStorage.getItem("access_token")
        this.token.refresh_token = localStorage.getItem("refresh_token")
        this.loadData()
        this.redictUrl = this.getRequest().source
    },
    methods: {
        async loadData() {
            let res = await getRsa();
            localStorage.setItem("rsaKey", res.data.key)
            this.url = 'data:image/png;base64,' + res.data.code
        },
        async onLogin() {
            this.input.password = Rsa.encrypt(md5(md5(this.input.password)))
            let res = await Login(this.input)
            if (res.code == 10000) {
                localStorage.setItem("access_token", res.data.access_token)
                localStorage.setItem("refresh_token", res.data.refresh_token)
                this.token.access_token = res.data.access_token
                this.token.refresh_token = res.data.refresh_token
                this.redirect()
            }
            else {
                this.$message({
                    type: 'error',
                    message: res.msg
                })
            }
            this.input.password = ''
        },
        redirect() {
            let param = this.getRequest()
            if (param.source)
                window.location.href = this.redictUrl + `?access_token=${this.token.access_token}&refresh_token=${this.token.refresh_token}`
        },
        getRequest() {
            var args = new Object();
            var query = location.href.split('?')[1]//获取查询串 
            console.log(query);
            var pairs = query.split(",");//在逗号处断开 
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');//查找name=value 
                if (pos == -1) {//如果没有找到就跳过 
                    continue;
                }
                var argname = pairs[i].substring(0, pos);//提取name 
                var value = pairs[i].substring(pos + 1);//提取value 
                args[argname] = unescape(value);//存为属性 
            }
            return args;//返回对象 
        }

    },
};
</script>

<style scoped>
.loginMain {
    /* display: flex;
    justify-content: space-between; */
    width: 20%;
    height: 300px;
    border: 1px solid black;
}
</style>